<template>
  <el-form-item
    label="组织"
    :prop="isProp ? 'deptId' : ''"
    :class="{ 'prop-form-item': !isProp }"
  >
    <el-cascader
      ref="myCascader"
      clearable
      :value="form.deptId"
      :disabled="!isAdmin || isDisabled"
      :options="deptListParams"
      :props="{ checkStrictly: true, emitPath: false }"
      @change="changeValue"
    ></el-cascader>
  </el-form-item>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { findIdParents } from "@/utils/util";

export default {
  name: "CommonAddDept",
  props: {
    deptListParams: {
      type: Array,
      default: [],
    },
    deptId: {
      type: String,
      default: "",
    },
    isProp: {
      type: Boolean,
      default: true,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    ...mapGetters(["isAdmin", "department"]),
  },
  data() {
    return {
      form: {
        deptId: null,
      },
    };
  },
  watch: {
    deptId: {
      handler: function (val) {
        this.initDepartment();
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // console.log('mounted')
    // this.initDepartment()
  },
  methods: {
    changeValue(val) {
      this.$emit("getCheckedDeptId", val);
    },
    initDepartment() {
      if (this.isAdmin) {
        this.form.deptId = this.deptId || null;
      } else {
        this.form.deptId = this.deptId || this.department;
      }

      this.changeValue(this.form.deptId);
    },
  },
};
</script>

<style scoped lang="scss">
.el-cascader {
  width: 100%;
}
.prop-form-item {
  ::v-deep .el-form-item__label:before {
    content: none !important;
  }
}
</style>
